<template>
  <div>
    <div class="bf">
      <div class="shang" @click="go">&lt;返回</div>
      <p>不凡</p>
    </div>

    <div class="swiper">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :key="item.id" v-for="item in banners">
            <img :src="item.img_url" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <ul class="ul">
      <li>30天无忧退货</li>
      <li>48小时快速退款退货</li>
      <li>满88元免邮费</li>
    </ul>

    <div>
      <p class="name">{{ bear.name }}</p>
      <p class="brief">{{ bear.goods_brief }}</p>
      <p class="price">¥{{ bear.retail_price }}</p>
      <div>
        <div v-html="bear.goods_desc" class="ttt"></div>
      </div>
    </div>

    <!-- <div v-for="el in attribute" :key="el.id">
      <div class="hz">
        <p class="elname">{{ el.name }}</p>
        <span class="elvalue">{{ el.value }}</span>
      </div>
    </div> -->
    <div class="box">
      <p class="pro">_____常见问题_____</p>

      <div v-for="el in problem" :key="el.id" class="pic">
        <p class="q">{{ el.question }}</p>
        <p class="a">答:{{ el.answer }}</p>
      </div>
    </div>

    <div class="box1">
      <p class="look">____大家都在看____</p>
      <ul class="fish">
        <li v-for="ele in list" :key="ele.id" class="cat">
          <img :src="ele.list_pic_url" alt="" />
          <p class="zzz">{{ ele.name }}</p>
          <p class="qqq">¥{{ ele.retail_price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { desc } from "@/api/category/index.js";
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      banners: [],
      bear: {},
      attribute: [],
      problem: [],
      list: []
    };
  },
  computed: {},
  created() {
    desc({
      id: this.$route.query.id,
      openId: "123"
    }).then(res => {
      console.log(res);
      this.banners = res.gallery;
      this.bear = res.info;
      this.attribute = res.attribute;
      this.problem = res.issue;
      this.list = res.productList;
    });
  },
  mounted() {},
  updated() {
    var bear = document.querySelector(".ttt");
    var imgs = bear.querySelectorAll(".ttt img");
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].style.width = "100%";
    }
  },
  methods: {
    go() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="scss">
// .fish {
//   background-color: darkgoldenrod;
// }
.ttt img /deep/ {
  //   display: block;
  width: 375px;
}
.qqq {
  color: brown;
  font-size: 14px;
}
.zzz {
  font-size: 14px;
}
.cat img {
  width: 130px;
  height: 130px;
  margin-top: 20px;
}
.cat {
  width: 182.5px;
  height: 250px;
  background-color: #fff;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
}
.look {
  font-size: 16px;
  margin-top: 20px;
}
.box1 {
  width: 100%;
  height: 5300px;
  background-color: #f5f5f5;
  margin-top: 20px;
  overflow: hidden;
}
.q {
  color: #8c8c8c;
}
.a {
  color: #8c8c8c;
}
.box {
  width: 100%;
  height: 380px;
  background-color: #f5f5f5;
  margin-top: 20px;
  overflow: hidden;
}
.pro {
  font-size: 16px;
  margin-top: 20px;
}
.price {
  color: brown;
  font-size: 18px;
}
.name {
  font-size: 24px;
}
.brief {
  font-size: 14px;
  color: lightslategray;
}
.hz {
  width: 320px;
  height: 30px;
  background-color: #f5f5f5;
  margin-left: 20px;
}
.elvalue {
  position: absolute;
  left: 130px;
  margin-top: -40px;
  line-height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.elname {
  margin-left: -200px;
  line-height: 30px;
}
.bf p {
  font-size: 14px;
  color: brown;
}
a {
  text-decoration: none;
  color: brown;
  font-size: 14px;
  position: absolute;
  left: 20px;
  top: 20px;
}

.span {
  margin-left: 20px;
}
.shang {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: brown;
  position: absolute;
  top: 15px;
  left: 30px;
}
.swiper {
  width: 100%;
  height: 400px;
}
.swiper-slide img {
  width: 375px;
  height: 400px;
  // margin-top: 40px;
}
.ul {
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  background-color: #f5f5f5;
  list-style: circle;
  // color: red;
}
</style>